<template>
  <div>
    <!-- 默认绑定个事件处理 -->
    <!-- <button @click="btnClick">按钮</button> -->
    <!-- <h2>{{ modelValue }}</h2> -->

    <!-- 通过input -->
    <!-- <input type="text" :value="modelValue" @input="btnClick" /> -->

    <!-- 绑定到props是不对的 -->
    <!-- <input type="text" v-model="modelValue" /> -->

    <input type="text" v-model="value" />
  </div>
</template>

<script>
export default {
  props: {
    modelValue: String,
  },
  emits: ["update:modelValue"],
  computed: {
    value: {
      set(value) {
        this.$emit("update:modelValue", value);
      },
      get() {
        return this.modelValue;
      },
    },
  },
  methods: {
    btnClick(event) {
      this.$emit("update:modelValue", event.target.value);
    },
  },
};
</script>

<style scoped></style>
